<!-- 自定义配置 -->
<template>
    <div>
        <el-collapse accordion>
            <el-collapse-item title="布局设置">
                <el-form-item label="布局行数">
                    <avue-input-number v-model="main.activeOption.grid.rowNum">
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="布局列数">
                    <avue-input-number
                        v-model="main.activeOption.grid.columnNum"
                    >
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="布局间距">
                    <avue-input-number v-model="main.activeOption.grid.gap">
                    </avue-input-number>
                </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="车间标题设置">
                <el-form-item label="高度">
                    <avue-input-number
                        v-model="main.activeOption.deptTitle.height"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体间距">
                    <avue-input-number
                        v-model="main.activeOption.deptTitle.split"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体类型">
                    <avue-select
                        filterable
                        allow-create
                        v-model="main.activeOption.deptTitle.fontFamily"
                        :dic="dicOption.fontFamily"
                    ></avue-select>
                </el-form-item>
                <el-form-item label="字体大小">
                    <avue-input-number
                        v-model="main.activeOption.deptTitle.fontSize"
                        :max="200"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体颜色">
                    <avue-input-color
                        v-model="main.activeOption.deptTitle.color"
                    ></avue-input-color>
                </el-form-item>
                <el-form-item label="字体行高">
                    <avue-input-number
                        v-model="main.activeOption.deptTitle.lineHeight"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体背景">
                    <avue-input-color
                        v-model="main.activeOption.deptTitle.backgroundColor"
                    ></avue-input-color>
                </el-form-item>
                <el-form-item label="文字粗细">
                    <avue-select
                        v-model="main.activeOption.deptTitle.fontWeight"
                        :dic="dicOption.fontWeight"
                    >
                    </avue-select>
                </el-form-item>
                <el-form-item label="对齐方式">
                    <avue-select
                        v-model="main.activeOption.deptTitle.textAlign"
                        :dic="dicOption.textAlign"
                    >
                    </avue-select>
                </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="车间滚动设置">
                <el-form-item label="滚动方向">
                    <avue-select
                        filterable
                        allow-create
                        v-model="main.activeOption.direction"
                        :dic="dicOption.direction"
                    ></avue-select>
                </el-form-item>
                <el-form-item label="滚动速度">
                    <avue-input-number
                        v-model="main.activeOption.scrollamount"
                        :min="0"
                    >
                    </avue-input-number>
                </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="产线内容设置">
                <el-form-item label="高度">
                    <avue-input-number
                        v-model="main.activeOption.lineContent.height"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="内左间距">
                    <avue-input-number
                        v-model="main.activeOption.lineContent.paddingLeft"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体间距">
                    <avue-input-number
                        v-model="main.activeOption.lineContent.split"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体类型">
                    <avue-select
                        filterable
                        allow-create
                        v-model="main.activeOption.lineContent.fontFamily"
                        :dic="dicOption.fontFamily"
                    ></avue-select>
                </el-form-item>
                <el-form-item label="字体大小">
                    <avue-input-number
                        v-model="main.activeOption.lineContent.fontSize"
                        :max="200"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体颜色">
                    <avue-input-color
                        v-model="main.activeOption.lineContent.color"
                    ></avue-input-color>
                </el-form-item>
                <el-form-item label="字体行高">
                    <avue-input-number
                        v-model="main.activeOption.lineContent.lineHeight"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="文字粗细">
                    <avue-select
                        v-model="main.activeOption.lineContent.fontWeight"
                        :dic="dicOption.fontWeight"
                    >
                    </avue-select>
                </el-form-item>
                <el-form-item label="边框背景图片">
                    <img
                        class="borderImg"
                        v-if="main.activeOption.borderImageSource"
                        :src="main.activeOption.borderImageSource"
                        alt=""
                        width="100%"
                    />
                    <el-input
                        clearable
                        v-model="main.activeOption.borderImageSource"
                    >
                        <div
                            @click="
                                main.handleOpenImg(
                                    'activeOption.borderImageSource',
                                    'border'
                                )
                            "
                            slot="append"
                        >
                            <i class="iconfont icon-img"></i>
                        </div>
                    </el-input>
                </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="产线滚动设置">
                <el-form-item label="悬停是否停止">
                    <avue-switch
                        v-model="main.activeOption.hoverStop"
                    ></avue-switch>
                </el-form-item>
                <el-form-item label="滚动时间">
                    <avue-input-number
                        v-model="main.activeOption.step"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="单步停止时间">
                    <avue-input-number
                        v-model="main.activeOption.waitTime"
                    ></avue-input-number>
                </el-form-item>

                <el-form-item label="开始滚动数量">
                    <avue-input-number
                        v-model="main.activeOption.limitMoveNum"
                        :min="0"
                    >
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="滚动上下间距">
                    <avue-slider v-model="main.activeOption.marginBottom">
                    </avue-slider>
                </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="产线预警设置">
                <avue-crud
                    :option="tableAlarmOption"
                    :data="main.activeOption.column"
                    @row-save="rowSave"
                    @row-del="rowDel"
                    @row-update="rowUpdate"
                >
                </avue-crud>
            </el-collapse-item>
        </el-collapse>
        <codeedit
            @submit="codeClose"
            v-model="code.obj"
            v-if="code.box"
            :type="code.type"
            :visible.sync="code.box"
        ></codeedit>
    </div>
</template>

<script>
import { tableAlarmOption } from "@/option/config";
import codeedit from "../../page/group/code";
import { dicOption } from "@/option/config";
export default {
    name: "productStatusMonitor",
    inject: ["main", "contain"],
    components: {
        codeedit
    },
    data() {
        return {
            dicOption: dicOption,
            tableAlarmOption: tableAlarmOption,
            code: {
                box: false,
                type: "data",
                obj: {}
            }
        };
    },
    methods: {
        rowSave(row, done) {
            this.main.activeOption.column.push(this.deepClone(row));
            done();
        },
        rowDel(row, index) {
            this.main.activeOption.column.splice(index, 1);
        },
        rowUpdate(row, index, done) {
            this.main.activeOption.column.splice(index, 1, this.deepClone(row));
            done();
        },
        codeClose(value) {
            this.main.activeOption.column = value;
        },
        openCode() {
            this.code.obj = this.main.activeOption.column;
            this.code.box = true;
        }
    }
};
</script>

<style lang="scss" scoped>
.borderImg {
    height: 100px;
    object-fit: contain;
}
</style>
